<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热力图</title>
</head>
<script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<!--引入百度地图-->
<script  type="text/javascript"
         src="http://api.map.baidu.com/api?v=2.0&ak=DDLwA2CBFGHRpxFzFx3K5KnBQtHP4hte" ></script>
<!--引入百度热力图-->
<script type="text/javascript" src="http://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js"></script>

<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="bmap.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1300px;height:600px;"></div>
<script type="text/javascript" >
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var app={};
    app.title = '热力图与百度地图扩展';
    var option = null;

    $.get('http://localhost:8080/city/1', function (data) {

        var points = [];
        for (var i=0;i<data.length;i++){
            var point=[];
            point.push(data[i]['longitude']);
            point.push(data[i]['latitude']);
            point.push(data[i]['count']);
            points.push(point);
        }

        myChart.setOption(option = {
            animation: false,
            bmap: {
                center: [116.232922, 39.542367],
                zoom: 14,
                roam: true
            },
            visualMap: {
                show: false,
                top: 'top',
                min: 0,
                max: 5,
                seriesIndex: 0,
                calculable: true,
                inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                }
            },
            series: [{
                type: 'heatmap',
                coordinateSystem: 'bmap',
                data: points,
                pointSize: 5,
                blurSize: 6
            }]
        });
        if (!app.inNode) {
            // 添加百度地图插件
            var bmap = myChart.getModel().getComponent('bmap').getBMap();
            bmap.addControl(new BMap.MapTypeControl());
        }
    },"json");

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
</body>
</html>